<template>
  <el-row class="header_box">

    <el-col :span="8"
      ><div class="common_height header_left">
      <el-button @click="openDrawer()">修改</el-button>
        <el-space >
          <el-image class="image_wh" src="src/assets/logo/logo.png" fit="fill"></el-image>
          <el-text class="common_text" tag="b" size="large" ref="shop.shopName"><span>{{ shop.shopName }}</span></el-text>
          <el-text class="common_text" tag="b" size="large">·</el-text>
          <el-text class="common_text" tag="b" size="large">{{list.title1.name}}</el-text>
        </el-space>
      </div></el-col
    >
    <el-col :span="16"
      ><div class="common_height header_right">
        <el-space size="large">
          <el-input
            v-model="inputValue"
            class="input_w"
            prefix-icon="Search"
            placeholder="请输入..."
          />
          <el-text class="w-100px mb-2" tag="b" truncated>{{list.title2.name}}</el-text>

          <el-select
            v-model="list.title3.name"
            placeholder="Select"
            class="select_w"
          >
            <el-option
              v-for="item in businessOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>

          <el-select v-model="list.title4.name" placeholder="Select" class="select_w">
            <el-option
              v-for="item in zhOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>

          <el-icon size="20px"><Printer color="#ce664b" /></el-icon>
          <el-badge :value="99" class="dot_flex"
            ><el-icon size="20px"><Bell /></el-icon
          ></el-badge>
        </el-space></div
    ></el-col>
  </el-row>
  <el-drawer v-model="drawerValue2" :with-header="false">
    <!-- 这个是那个词那些的 -->
    <ul class="show">
      <li v-for="(item, index) in data" :key="index">
        <div class="inputTitle" @click="changeTitleEdit(index)">
          <input type="text" v-model="item.name" v-if="item.edit" />
          <p v-else>{{ item.name }}</p>
        </div>
      </li>
    </ul>
    <el-button @click="onSubmit()">确认修改</el-button>
  </el-drawer>
</template>
<script setup>
import { ref,onMounted } from "vue";
import axios from "axios";

    let shop = ref([]);
const drawerValue2 = ref(false)
// 打开弹窗
const openDrawer = () => {
  drawerValue2.value = true
  data.value = []
  data.value = JSON.parse(JSON.stringify(list.value))
}
const changeTitleEdit = (index) => {
  data.value[index].edit = true
}


//
const list = ref({
  title1: {
    name: 'HEALTH 商家经营中心1',
    edit: false,
  },
  title2: {
    name: '个人用户小王1',
    edit: false,
  },
  title3: {
    name: '营业中',
    edit: false,
  },
  title4: {
    name: 'mt2202',
    edit: false,
  },
})

let data = ref([]) //修改时保存数据

const onSubmit = () => {
  drawerValue2.value = false
  for (const key in data.value) {
    if (Object.prototype.hasOwnProperty.call(data.value, key)) {
      const element = data.value[key]
      element.edit = false
    }
  }
  list.value = []
  list.value = JSON.parse(JSON.stringify(data.value))

  console.log(JSON.stringify(list.value))



}
    const fetchUsers = async () => {
      try {
        const response = await axios.get('http://localhost:8080/system/report/list');
        shop = response.data.rows[0];
      } catch (error) {
        console.error('Axios error:', error);
      }
    };

    fetchUsers();
let inputValue = ref("");
let businessState = ref("营业中");
let businessOpt = ref([
  { value: "open", label: "营业中", disabled: false },
  { value: "close", label: "歇业中", disabled: true },
]);

let zhSelect = ref("mt2202");
let zhOpt = ref([{ value: "mt2022", label: "mt2022" }]);
</script>
<style lang="scss" scoped>
.header_box {
  width: 100%;
  height: 100%;

  .common_height {
    height: 100%;
  }
}
.header_left {
  display: flex;
  .image_wh {
    width: 30px;
    height: 30px;
  }
  .common_text{
    color:black;
    font-weight: 600;
    font-size: 20px;;
  }
}
.header_right {
  display: flex;
  justify-content: end;

  .w-100px {
    max-width: 100px;
  }
  .input_w {
    width: 240px;
  }
  .select_w {
    width: 89px;
    //覆盖element样式
    ::v-deep .el-input__wrapper {
      box-shadow: none !important;
    }
  }
  .dot_flex {
    display: flex;
    align-items: center;
  }
}
</style>
